<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
      {% load static %}
    <title>注册</title>
    {% load static %}
    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>
</head>
<body>
<div class="wrapper">
<form>
    {% csrf_token %}
    <div>
        用户名:<input type="text" name="username">
        <span class="usererr"></span>
    </div>
    <div>
        密码:<input type="text" name="password">
        <span class="pwderr"></span>
    </div>
    <div>
        email:<input type="text" name="email">
    </div>
    <div>
        phone:<input type="text" name="phone">
    </div>
    <div>
        头像:<input type="file" name="avatar">
    </div>
    <div>
        <input type="button" value="注册">
    </div>
</form>
</div>
<script>
         $(function () {
             $(':button').click(function () {
                 //发送ajax提交
                 //获取头像
                 let avatar = $('input[name=avatar]')[0].files[0]
                 let username = $('input[name=username]').val()
                 let password = $('input[name=password]').val()
                 let phone = $('input[name=phone]').val()
                 let email = $('input[name=email]').val()
                 let csrfmiddlewaretoken = $('input[name=csrfmiddlewaretoken]').val()
                 {# `username=${username}&password=${password}&phone${phone}&email=${email}&avatar=${avatar}&csrfmiddlewaretoken=${csrfmiddlewaretoken}` #}
                 axios.post('/users/register/', {username, password, phone, email, avatar, csrfmiddlewaretoken},
                     {
                         headers: {
                             'Content-type': 'multipart/form-data', //代表是文件上传的表单
                         }
                     })
                     .then(res => {
                         if (res.data.code == 200) {
                             location.href = '/users/login/'  //login页面特写
                         }
                         alert(res.data.msg)
                     }) //
                     .catch(err => console.log(err)) //失败相应结果


             })
     })
</script>
</body>
</html>